<template>
    <div>
        <div class="top_icon">
            <div class="right">
                <van-icon name="search" size="0.8rem" />
                <van-icon name="setting-o" size="0.8rem" />
            </div>
        </div>
        <div class="main">
            <div class="container">
                <div class="top">
                    <div class="icon"><img src="https://www.keaitupian.cn/cjpic/frombd/1/253/1215285637/1396751085.jpg" alt=""></div>
                    <span class="name">Username</span>
                    <span class="cit">点击查看个人主页 ></span>
                    <div class="create">
                        <span>创作中心</span>
                    </div>
                </div>
                <div class="text">
                    <p>
                        <span> 1</span> 关注  <div class="line"></div>
                        <span> 0</span> 被关注  <div class="line"></div>
                        <span> 0</span> 收藏  <div class="line"></div>
                        <span> 10</span> 最近浏览
                    </p>
                </div>
            </div>
        </div>
        <div class="bottom_my">
            <div class="container">
                <div class="gird">
                    <van-grid clickable :column-num="5">
                        <van-grid-item icon="notes-o" text="书架" to="/" />
                        <van-grid-item icon="balance-o" text="钱包" url="/vant/mobile.html" />
                        <van-grid-item icon="gift-o" text="福利社" to="/" />
                        <van-grid-item icon="cash-o" text="付费咨询" url="/vant/mobile.html" />
                        <van-grid-item icon="balance-list-o" text="知识商单" url="/vant/mobile.html" />
                        <van-grid-item icon="completed-o" text="已购" to="/" />
                        <van-grid-item icon="discount-o" text="圆桌" url="/vant/mobile.html" />
                        <van-grid-item icon="good-job-o" text="超赞包" to="/" size="16px" />
                        <van-grid-item icon="video-o" text="传视频" url="/vant/mobile.html" />
                        <van-grid-item icon="location-o" text="活动广场" url="/vant/mobile.html" />
                        <van-grid-item icon="home-o" text="训练营" to="/" />
                        <van-grid-item icon="cluster-o" text="社区共建" url="/vant/mobile.html" />
                        <van-grid-item icon="service-o" text="客服" to="/" size="16px" />
                        <van-grid-item icon="gem-o" text="积分" url="/vant/mobile.html" />
                        <van-grid-item icon="award-o" text="品牌榜" url="/vant/mobile.html" />
                    </van-grid>
                </div>
                <div class="tiaoz">
                    <div class="mubiao">
                        <span class="tioazh">挑战</span>
                        <p style="margin-top: 50px;">今日完成以下3个任务,赢积分、福利礼包...</p>
                        <p class="wc">已完成<span>0</span>个任务</p>
                    </div>
                    <div class="box_1">
                        <ul>
                            <li v-for="(item , index) in arr1">
                                <div class="fabu">{{ item.t1 }}</div>
                                <div class="gd">查看更多 ></div>
                                <div class="box_box">
                                    <p class="box_title">{{ item.t2 }}</p>
                                    <p class="text1">{{ item.t3 }}<span> +5</span></p>
                                    <div class="btn">
                                        <router-link to="/">去完成</router-link>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>    
        
    </div>
    
</template>

<style lang="less" scoped>
.top_icon{
    position:fixed ;
    z-index: 1000;
    background-color: #fff;
    height: 40px;
    top: 0px;
    width: 100%;
    .right{
        display: flex;
        width: 80px;
        justify-content: space-between;
        position: absolute;
        right: 15px;
        top: 10px;
    }
}
.container{
        width: 94%;
        margin: 0 auto;
    }
.main{
    margin-top: 50px;
    background-color: #f4f4fe;
    height: 130px;
    .top{
        width: 100%;
        position: relative;
        img{
            width: 20%;
            border-radius: 50%;
            position: absolute;
            top: 5px;
        }
        .name{
            position: absolute;
            font-size: 24px;
            top: 10px;
            left: 80px;
        }
        .cit{
            display: inline-block;
            width: 200px;
            position: absolute;
            font-size: 16px;
            top: 40px;
            left: 80px;
            color: #a8a3a3;
        }
        .create{
            position: absolute;
            font-size: 16px;
            width: 100px;
            height: 30px;
            line-height: 30px;
            border: 1px solid #817e7d;
            border-radius: 30px;
            right: 0px;
            text-align: center;
            top: 10px;
        }
    }
    .text{
        font-size: 16px;
        position: relative;
        top: 100px;
        display: flex;
        justify-content: space-between;
        .line{
            height: 14px;
            width: 1px;
            margin-top: 3px;
            background-color: #858484;
        }
        span{
            height: 21px;
            line-height: 21px;
        }
    }
}
.bottom_my{
    margin-top: 10px;
    // border: 1px solid black;
    background-color: #f5f6fa;
    height: 1100px;
    .tiaoz{
        margin-top: 20px;
        position: relative;
        .mubiao{
            background-color: #7671ff;
            width: 100%;
            height: 180px;
            border-radius: 20px;
            color: #fff;
            position: absolute;
            .tioazh{
                font-size: 26px;
                position: absolute;
                top: 10px;
                left: 10px;
            }
            p{
                font-size: 16px;
                margin-left: 10px;
                margin-top: 10px;
                span{
                    font-size: 16px;
                }
            }
            .wc{
                font-size: 12px;
                color: #a4a4a5;
            }      
        }
        .box_1{
            position: absolute;
            width: 100%;
            top: 120px;
            background-color: #fff;
            border-radius: 20px;
            height: 700px;
            ul{
                width: 100%;
                li{
                    width: 100%;
                    height: 160px;
                    position: relative;
                    font-size: 18px;
                    .fabu{
                        position: absolute;
                        top: 10px;
                        left: 10px;
                        font-size: 18px;
                    }
                    .gd{
                        color: #ccc;
                        position: absolute;
                        top: 10px;
                        right: 10px;
                    }
                    .box_box{
                        width: 94%;
                        height: 100px;
                        background-color: #f9f9fb;
                        border-radius: 20px;
                        position: absolute;
                        top: 50px;
                        left: 3%;
                        .box_title{
                            margin-top: 5px;
                            margin-left: 10px;
                            font-size: 18px;
                        }
                        .text1{
                            color: #ccc;
                            font-size: 14px;
                            position: absolute;
                            bottom: 10px;
                            span{
                                color: #0f77fe;
                            }
                        }
                        .btn{
                            width: 80px;
                            height: 30px;
                            line-height: 30px;
                            background-color: #edf1fd;
                            border-radius: 30px;
                            text-align: center;
                            font-size: 14px;
                            position: absolute;
                            right: 10px;
                            bottom: 10px;
                            a{
                                color: #0f77fe;     
                            }
                            
                        }
                    }
                }
            }
        }
    }
}
</style>
<script>
import { Dialog } from 'vant';
import { Grid, GridItem } from 'vant';

export default {
    data(){
        return{
            arr1:[
                {
                    t1:'发布一个回答',
                    t2:'金钱和健康哪个更重要?',
                    t3:'发布一篇100字以上的回答'
                },
                {
                    t1:'发布一个想法',
                    t2:'有 6432 懂友友正在讨论 #生活中的手艺人',
                    t3:'发布 1条 20 字以上带 3 图的想法'
                },
                {
                    t1:'赞同1篇认可的内容',
                    t2:'               ',
                    t3:'好内容值得鼓励 ',
                },
                {
                    t1:'关注1位感兴趣的知友',
                    t2:'                  ',
                    t3:'发现志同道合的知友 ',
                },
            ],
        }
    },
    methods:{
        
    },
    beforeRouteEnter(to,from,next){
        let token = localStorage.getItem("users");
        if(token){
            next(true);
        }else{
            Dialog.confirm({
                title:"您还没登录",
                message:"要跳转到登录页面吗？",
                theme: 'round-button',
            }).then(()=>{
                next({path:'/login'})
            }).catch(()=>{
                next(false);
            })
        }
    },
}
</script>